@extends('Admin.base')
@section('css')
    <link rel="stylesheet" href="/Admin/layuiadmin/css/extend/formSelects-v4.css" media="all">
@endsection
@section('style')

@endsection
@section('content')
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item layui-row">
                <div class="layui-inline layui-col-xs2 layui-col-sm2 layui-col-md2">
                    <label class="layui-form-label">手机号</label>
                    <div class="layui-input-block">
                        <input type="text" name="phone" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline layui-col-xs2 layui-col-sm2 layui-col-md2">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-block">
                        <input type="text" name="realname" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline layui-col-xs3 layui-col-sm3 layui-col-md3">
                    <label class="layui-form-label">角色</label>
                    <div class="layui-input-block">
                        <select name="role_str" xm-select="role_str" xm-select-show-count="1" xm-select-search="">
                            @foreach (getRoleList() as $id => $name)
                                <option value="{{$id ?? 0}}">{{$name ?? ''}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="layui-inline layui-col-xs2 layui-col-sm2 layui-col-md2">
                    <label class="layui-form-label">账号状态</label>
                    <div class="layui-input-block">
                        <select name="status" >
                                <option value=''>全部</option>
                                <option value="1">正常</option>
                                <option value="2">冻结</option>
                        </select>
                    </div>
                </div>

                <div class="layui-inline">
                    <div class="layui-btn-group layui-input-block">
                        <button class="layui-btn layui-input-block layuiadmin-btn-admin" lay-submit lay-filter="LAY-search">
                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-card-body">
            <div style="padding-bottom: 10px;">
                <a class="layui-btn" href="{{ route('adminer.add') }}">添 加</a>
            </div>
            <table id="LAY-table" lay-filter="LAY-table"></table>
            <script type="text/html" id="table-toolbar">
                <a href="{{url('admin/adminer')}}/@{{ d.id }}/edit" class="layui-btn layui-btn-green layui-btn-xs">
                    修改
                </a>

                @{{#  if(d.status == 1){ }}
                    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="status">冻结</a>
                @{{#  }else{ }}
                    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="status">正常</a>
                @{{#  } }}


                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
                    删除
                </a>
            </script>
        </div>
    </div>
@endsection

@section('script')
    <script src="/js/ajax.js"></script>
    <script>
        layui.use(['form', 'table', 'formSelects'], function(){
            var $ = layui.$
                ,form = layui.form
                ,table = layui.table,
                formSelects = layui.formSelects;

            table.render({
                elem: '#LAY-table'
                ,url: "{{url('/admin/adminer/table')}}"
                ,method: "post"
                ,page: true //开启分页
                ,limit:30
                ,cols: [[
                    {field: 'username', title: '用户名'}
                    ,{field: 'phone', title: '手机号'}
                    ,{field: 'realname', title: '真实姓名'}
                    ,{field: 'role', title: '角色', }
                    ,{field: 'status', title: '用户状态' , templet: function(d){
                            return d.status == 1 ? '<button type="button" class="layui-btn layui-btn-normal layui-btn-xs layui-btn-radius">正常</button>' : '<button type="button" class="layui-btn layui-btn-danger layui-btn-xs layui-btn-radius">冻结</button>'
                    }}
                    ,{field: 'created_at', title: '创建时间'}
                    ,{fixed: 'right', title: '操作' , width: 200, align:'center', toolbar: '#table-toolbar'}
                ]]
            });

            //监听工具条
            table.on('tool(LAY-table)', function(obj){
                var data = obj.data;
                if(obj.event === 'del'){
                    layer.confirm('确认删除行吗?', function(index){
                        $.ajax({
                            url: '/admin/adminer/'+ data.id
                            , type: 'POST'
                            , dataType: 'json'
                            , data: {'_method':"DELETE"}
                            , success: function (ret) {
                                if (ret.hasOwnProperty('code') && ret.code == 200) {
                                    layer.msg(ret.message,{icon: 1,time:2000});
                                    obj.del();
                                    layer.close(index);
                                    return false;
                                }
                                layer.msg(ret.message,{icon:2});
                            }
                        });

                    });
                }else if(obj.event === 'status'){
                    layer.confirm('确认修改状态吗?', function(index){
                        $.ajax({
                            url: '/admin/adminer/upstatus/'+ data.id
                            , type: 'POST'
                            , dataType: 'json'
                            , success: function (ret) {
                                if (ret.hasOwnProperty('code') && ret.code == 200) {
                                    layer.msg(ret.message,{icon: 1,time:2000});
                                    table.reload('LAY-table');
                                    return false;
                                }
                                layer.msg(ret.message,{icon:2});
                            }
                        });
                    });
                }
            });
            //监听搜索
            form.on('submit(LAY-search)', function(data){
                var field = data.field;
                //执行重载
                table.reload('LAY-table', {
                    where: field,page: {curr: 1}
                });
            });
        });
    </script>

@endsection